<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <!-- 引入 Vue 2 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>今天天气是{{info}}</h2>
        <button @click="change">切换天气</button>
        <div>数字a:{{numbers.a}}</div>
        <button @click="numbers.a++">a加1</button>
        <div>数字b:{{numbers.b}}</div>
        <button @click="numbers.b++">b加1</button>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isHot: false,
                numbers:{
                    a:1,
                    b:2
                }
            },
            computed: {
                info() {
                    return this.isHot?'炎热':'凉爽';
                } 
            },
            methods: {
                change() {
                    this.isHot = !this.isHot
                }
            },
            watch: {
                info:{
                    handler(newVal, oldVal) {
                        console.log('天气变化了，从', oldVal, '变成了', newVal);
                    },
                },
                'numbers.a':{
                    handler(newVal, oldVal) {
                        console.log('数字a变化了，从', oldVal, '变成了', newVal);
                    },
                },
                numbers:{
                    handler(newVal, oldVal) {
                        console.log('数字对象变化了',newVal.a,newVal.b);
                    },
                    deep:true// 深度监听
                }
            }
        });
    </script>

</body>
</html> 